<template>
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="item in 3" :key="item">
            <div class="list-name">
                <span>热门电影</span>
                <span class="list-more">更多 > </span>
            </div>
            <div class="list-content">
                <FilmItem v-for="item in 6" :key="item"></FilmItem>
            </div>
        </div>
        <!-- 首页分类列表 end -->
    </div>
</template>
<script>
import FilmItem from '../components/FilmItem'
export default {
    components:{
        FilmItem
    }
}
</script>

<style lang="less" scoped>
// 首页样式
.home-box{
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content{
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after{
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>